內容參考:http://jqueryui.com/tooltip/
Jquery plugin非常強大,標榜可以讓任何物件浮出說明框,
這邊先用選單來測試(官網是用一般文字以及表單做例子)
假設有四個選單,每個選單都有一個說明的話,語法如下擺放:
1.在裡面貼這些內容:
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
*備註:label的樣式可以玩一玩,不過咧~類似的plugin不少,會用之後,應該可以google到一個比較喜歡的外觀來套用喇~
2.在中間貼上選單內容
<ul>
<li title="說明一">選單一</li>
<li title="說明二">選單二</li>
<li title="說明三">選單三</li>
<li title="說明四">選單四</li>
</ul>
*備註:說明n就是滑鼠移動到選單上時,會浮現出來的文字內容